import React, { useState, useRef, useEffect } from 'react';
import cls from 'classnames';
import styles from './index.less';
import { SearchOutlined, CloseSquareOutlined } from '@ant-design/icons';
import { Modal, Button } from 'antd';
import { addProj } from '@/services/modelManageService';
import { useDispatch, useSelector } from 'umi';
import { placeholders } from './dashboard';

const NAV_LIST = [
  { name: '宜马通道', projId: '1296256020068786178' },
  { name: '312国道XS12', projId: '1308246635895685122' },
  { name: '312国道XS11', projId: '1308254822183043073' },
  { name: '高浪路', projId: '1308241434249887746' },
];

// 项目管理部分
const MonitorLeft = ({ projList = NAV_LIST }) => {
  const [keyword, setKeyword] = useState('');
  const curProj = useSelector(s => s.monitor.curLocation);
  const dispatch = useDispatch();

  useEffect(() => {
    let params = new URL(document.location).searchParams;
    let id = params.get('i');
    let index = 0;
    NAV_LIST.forEach(({ projId }, i) => {
      if (projId == id) {
        index = i;
      }
    });
    setTimeout(() => {
      handleItemClick(NAV_LIST[index]);
    }, 200);
  }, []);

  function handleItemClick(item) {
    try {
      if (window.projectToLiveStreamList[item.projId]) {
        dispatch({
          type: 'monitor/updateState',
          payload: {
            videoList: window.projectToLiveStreamList[item.projId],
            curLocation: item.projId,
          },
        });
      } else {
        dispatch({
          type: 'monitor/updateState',
          payload: {
            curLocation: item.projId,
          },
        });
      }
    } catch (error) {}
  }

  return (
    <div className={styles.left}>
      <div className={styles.leftSearch}>
        <SearchOutlined></SearchOutlined>
        <input
          placeholder="搜索BIM模型名称"
          onChange={e => setKeyword(e.target.value)}
          type="text"
        />
      </div>
      <div style={{ paddingTop: 24, paddingBottom: 16, paddingLeft: 24, opacity: 0.4 }}>
        监控项目
      </div>
      <ul className={styles.leftList}>
        {!!projList.length &&
          projList
            .filter(e => {
              return e.name.indexOf(keyword) !== -1;
            })
            .map(e => {
              return (
                <li
                  className={cls({ [styles.active]: curProj === e.projId })}
                  onClick={() => {
                    handleItemClick(e);
                    placeholders.imgPrefix = e.projId;
                  }}
                  key={e.projId}
                >
                  {e.name}
                </li>
              );
            })}
      </ul>
    </div>
  );
};

export default MonitorLeft;
